<template>
	<view>
		<view class="apply-popup">
		  <view class="popup-header">
		    <text class="popup-title">专升本报名</text>
		  </view>
		  
		  <view class="form-container" scroll-y>
		    <view class="form-item">
		      <text class="form-label">姓名</text>
		      <input class="form-input"
					 
					 v-model="applyForm.name" placeholder="请输入真实姓名" />
		    </view>
		    
		    <view class="form-item">
		      <text class="form-label">身份证号</text>
		      <input class="form-input" v-model="applyForm.idCard" 
					placeholder="请输入18位身份证号码" 
					 @blur="validateIdCard"
					 maxlength="18"
					 />
		    </view>
		    <text v-if="idCardError" class="error-message">{{ idCardError }}</text>
		    <view class="form-item">
		      <text class="form-label">专科学校</text>
		      <input class="form-input" v-model="applyForm.college" placeholder="请输入所在专科学校" />
		    </view>
		    
		    <view class="form-item">
		      <text class="form-label">专业</text>
		      <input class="form-input" v-model="applyForm.major" placeholder="请输入专科专业" />
		    </view>
		    
		    <view class="form-item">
		      <text class="form-label">学校</text>
		      <picker class="form-input" mode="selector" :range="collegeOptions" range-key="name" @change="selectCollege">
		        <view>{{applyForm.targetCollege || '请选择学校'}}</view>
		      </picker>
		    </view>
		    <view class="form-item">
		      <text class="form-label">微信</text>
		      <input class="form-input" v-model="applyForm.wx" placeholder="请输入微信"  />
		    </view>
		    <view class="form-item">
		      <text class="form-label">联系电话</text>
		      <input class="form-input" v-model="applyForm.phone" placeholder="请输入联系电话" type="number" />
		    </view>
		    
		    <view class="form-item">
		      <text class="form-label">电子邮箱</text>
		      <input class="form-input" v-model="applyForm.email" placeholder="请输入电子邮箱" type="email" />
		    </view> 
		  </view>
		  
		  <view class="popup-footer">
		    <button style="line-height: 50rpx;" class="submit-btn"  @click="submitApply">提交报名</button>
		  </view>
		</view>
		<!-- 报名成功弹窗 -->
		<uni-popup ref="successPopup" type="center">
		  <view class="success-popup">
		    <text class="success-title">报名成功</text>
		    <text class="success-desc">我们已收到您的报名信息，将在3个工作日内联系您</text>
		    <button style="margin-top: 35rpx;" class="success-btn" @click="closeSuccessPopup">确定</button>
		  </view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				idCardError:'',
				// 报名表单
				applyForm: {
				  name: '',
				  idCard: '',
				  college: '',
				  major: '',
				  targetCollege: '',
				  targetCollegeId: '',
				  targetMajor: '',
				  targetMajorId: '',
				  phone: '',
				  email: '',
				  transcript: null,
				  certificate: null,
				  agreed: false,
				  wx:''
				},
				collegeOptions:[],
			}
		},
		onLoad() {
			this.getStudentsSchool()
		},
		methods: {
			async getStudentsSchool() {
				const res = await this.$api.get('/StudentsSchool/index','',true)
				if(res.data.code === 200) {
					this.collegeOptions = res.data.data
					
				}
			},
			// 选择报考院校
			selectCollege(e) {
			  const index = e.detail.value
			  this.applyForm.targetCollege = this.collegeOptions[index].name
			  this.applyForm.targetCollegeId = this.collegeOptions[index].id
			  
			},
			// 实时验证（失焦时）
			validateIdCard() {
			  const idCard = this.applyForm.idCard.trim();
			  
			  // 空值校验
			  if (!idCard) {
				this.idCardError = '请输入身份证号码';
				return false;
			  }
			  
			  // 格式校验（18位，允许最后一位是X/x）
			  const idCardReg = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			  if (!idCardReg.test(idCard)) {
				this.idCardError = '身份证号码格式不正确';
				return false;
			  }
			  
			  // 出生日期校验（可选，如需严格验证可添加）
			  
			  // 验证通过
			  this.idCardError = '';
			  return true;
			},
			// 选择报考院校
			selectCollege(e) {
			  const index = e.detail.value
			  this.applyForm.targetCollege = this.collegeOptions[index].name
			  this.applyForm.targetCollegeId = this.collegeOptions[index].id
			},
			// 提交报名
			async submitApply() {
			  // if (!this.canSubmit) return
			  if (!this.validateIdCard()) {
				  return uni.showToast({
					title: '请检查身份证信息',
					icon: 'none'
				  });
				}
		
			  // 验证手机号
			  if (!this.validatePhone(this.applyForm.phone)) {
			    uni.showToast({
			      title: '请输入正确的手机号码',
			      icon: 'none'
			    })
			    return
			  }
			  
			  // 验证邮箱
			  if (!this.validateEmail(this.applyForm.email)) {
			    uni.showToast({
			      title: '请输入正确的邮箱地址',
			      icon: 'none'
			    })
			    return
			  }
			  
			  // 显示加载中
			  uni.showLoading({
			    title: '提交中...',
			    mask: true
			  })
			  const params = {
				  name:this.applyForm.name,
				  phone :this.applyForm.phone,
				  email:this.applyForm.email,
				  id_card:this.applyForm.idCard,
				  major:this.applyForm.major,
				  source:'微信小程序',
				  graduate_school:this.applyForm.college,
				  wx:this.applyForm.wx,
				  target_college:this.applyForm.targetCollege,
				  target_college_id:this.applyForm.targetCollegeId
			  }
			  const res = await this.$api.post('/StudentsSchool/submit',params,true)
			  if(res.data.code === 200) {
				  uni.hideLoading()
				  // 重置表单
				  this.resetApplyForm()
				  // 显示成功弹窗
				  this.$refs.successPopup.open()
			  }
			 
			},
			
			// 关闭成功弹窗
			closeSuccessPopup() {
			  this.$refs.successPopup.close()
			},
			
			// 重置报名表单
			resetApplyForm() {
			  this.applyForm = {
			    name: '',
			    idCard: '',
			    college: '',
			    major: '',
			    targetCollege: '',
			    targetCollegeId: '',
			    targetMajor: '',
			    targetMajorId: '',
			    phone: '',
			    email: '',
			    transcript: null,
			    certificate: null,
			    agreed: false
			  }
			},
			
			// 验证手机号
			validatePhone(phone) {
			  const reg = /^1[3-9]\d{9}$/
			  return reg.test(phone)
			},
			
			// 验证邮箱
			validateEmail(email) {
			  const reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
			  return reg.test(email)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 添加错误提示样式 */
	.error-message {
	  color: #f56c6c;
	  font-size: 24rpx;
	  padding-left: 20rpx;
	  margin-bottom: 20rpx;
	}
 // 报名弹窗样式
  .apply-popup {
    background: white;
    border-radius: 20px 20px 0 0;
    padding: 20px;
    
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      .popup-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
      }
    }
    
    .form-container {
      margin-bottom: 15px;
      
      .form-item {
        margin-bottom: 15px;
        position: relative;
        
        .form-label {
          font-size: 14px;
          color: #666;
          display: block;
          margin-bottom: 8px;
        }
        
        .form-input {
          background: #f5f7fa;
          border-radius: 8px;
          padding: 12px 15px;
		  height: 90rpx;
          font-size: 14px;
          color: #333;
          width: 100%;
          box-sizing: border-box;
          
          &[mode=selector] {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
        
        &.upload-item {
          .upload-list {
            display: flex;
            gap: 10px;
            
            .upload-btn {
              flex: 1;
              background: #f5f7fa;
              border-radius: 8px;
              padding: 12px;
              text-align: center;
              font-size: 14px;
              
              .upload-tip {
                font-size: 12px;
                color: #999;
                margin-left: 5px;
              }
              
              .upload-success {
                font-size: 12px;
                color: #52c41a;
                margin-left: 5px;
              }
            }
          }
        }
      }
      
      .agreement {
        margin-top: 20px;
        font-size: 12px;
        color: #666;
        display: flex;
        align-items: center;
        
        .agreement-link {
          color: #1890ff;
        }
      }
    }
    
    .popup-footer {
      .submit-btn {
        background: linear-gradient(to right, #FF5C8D, #764ba2);
        color: white;
        border-radius: 25px;
        height: 50px;
        line-height: 50px;
        font-size: 16px;
        font-weight: bold;
        &[disabled] {
          opacity: 0.6;
        }
      }
    }
  }
  
  // 成功弹窗样式
  .success-popup {
    background: white;
    border-radius: 15px;
    padding: 30px 25px;
    width: 280px;
    text-align: center;
    
    .success-icon {
      width: 60px;
      height: 60px;
      margin-bottom: 15px;
    }
    
    .success-title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 10px;
    }
    
    .success-desc {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 20px;
    }
    
    .success-btn {
      background: linear-gradient(to right, #FF5C8D, #764ba2);
      color: white;
      border-radius: 25px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }
  }

</style>
